import styles from './index.module.scss';
import Link from 'next/link';
// import { QRCodeCanvas } from "qrcode.react";
import AliIcon from '@components/aliIcon';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import links from '@config/links.config';

const Navigation = () => {

    const router = useRouter();
    const [currentLink, setCurrentLink] = useState(router.pathname ?? '');

    useEffect(() => { 
        setCurrentLink(router.pathname);
    }, [router.pathname])

    return <nav className={styles.nav}>
        <div className={styles.logo_wrap}>
            <Link href='/'>
                <Image
                    src='https://github-production-user-asset-6210df.s3.amazonaws.com/58798241/237849684-8abb5c53-ff8e-4a6a-9407-29c11463a8dd.jpg'
                    alt="logo" width={50} height={50}
                />
            </Link>
        </div>
        <div className={styles.nav_mid}>
            {
                links.map((v, i) => {
                    return <Link key={i} href={v.href} className={currentLink === v.href ? styles.active : ''}>{v.text}</Link>
                })
            }
        </div>
        <div className={styles.icons}>
            <div className={styles.phone}>
                <AliIcon icon='icon-shouji' />
            </div>
            {/* <QRCodeCanvas
                value={``}
                size={200}
                includeMargin
                level="H"
                imageSettings={{
                    src: '',
                    width: 40,
                    height: 40,
                    excavate: true,
                }}
            /> */}
        </div>
    </nav>
}

export default Navigation;